<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <!--    &lt;!&ndash; 导入依赖&ndash;&gt;-->
    <!--    <link rel="stylesheet" href="css/login.css">-->
    <!--    <link rel="stylesheet" href="../css/all.css">-->
    <!--    <link rel="stylesheet" href="../css/google-fonts.css">-->
        <script type="text/javascript" src="js/md5.js"></script>

    <!--    <link rel="stylesheet" href="node_modules/mdbootstrap/css/bootstrap.min.css">-->
    <!--    <link rel="stylesheet" href="node_modules/mdbootstrap/css/mdb.min.css">-->
    <!--    <link rel="stylesheet" href="node_modules/mdbootstrap/css/style.css">-->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            /* background-color: #42464c */
        }

        .container {
            height: 100%;
            background-color: #42464c
        }

        .login-wrapper {
            background-color: #fff;
            width: 358px;
            height: 588px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .h4 {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }

        .form-control {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }

        .form-control::placeholder {
            text-transform: uppercase;
        }

        .btn1 {
            text-align: center;
            padding: 10px;
            cursor: pointer;
            width: 100%;
            margin-top: 40px;
            /* background-image: linear-gradient(to right,#8564e6, #91dfe5); */
            background-color: #666ccc;
            border: none;
            color: #fff;
            font-weight: 900;
            border-radius: 10px;
        }

        .btn1:hover {
            /* background-image: linear-gradient(to right,#a48af4, #a4e3e9); */
            background-color: #777fec;
        }

        .underline:hover {
            text-decoration: underline;
        }

        .msg {
            text-align: center;
            line-height: 88px;
        }

        a {
            text-decoration-line: none;
            color: #abc1ee;
        }

        #icon {

            position: absolute;
            left: 100px;
            top: 15px;
        }

        #text {
            position: absolute;
            left: 180px;
            top: 20px;
            color: white;
            font-weight: 900;
            font-size: 30px;;
            font-family: "Arial";
        }
    </style>

</head>

<body>
<script type="text/javascript" src="node_modules/mdbootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/mdbootstrap/js/popper.min.js"></script>
<script type="text/javascript" src="node_modules/mdbootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/mdbootstrap/js/mdb.min.js"></script>

<div>
    <img id="icon"
         src="/img/logo.png"/>
    <div id="text">聊天吧</div>
</div>
<!-- 登录 -->
<div id="loginForm" class="container">
    <div class="login-wrapper">
        <div class="text-center border-light p-5" action="/user/login">
            <div class="marginlr">

                <p class="h4 mb-4">登录</p>
                <!-- Name -->
                <input type="text" name="name" id="defaultLoginFormName" class="form-control mb-4" placeholder="姓名">
                <!-- Password -->
                <input type="password" name="password" id="defaultLoginFormPassword" class="form-control mb-4"
                       placeholder="密码">
                <!-- Sign in button -->
                <button class="btn1 btn-info btn-block my-4" type="button" id="submitBtn">登录</button>
                <!-- Register -->
                <p style="margin-top: 20px">还没有账号?
                    <a href="javascript:registerNow()">立即注册</a>
                </p>
            </div>
        </div>
    </div>
</div>

<!-- 注册 -->
<div class="container" id="registerForm"  >
    <div class="login-wrapper">
        <div class="text-center border-light p-5" action="/user/register">
            <div class="marginlr">
                <p class="h4 mb-4">注册</p>

                <!--  Name  -->
                <input type="text" name="name" id="defaultRegisterFormFirstName" class="form-control mb-4"
                       placeholder="姓名(至少四个字符)" >
<!--                <small class="form-text text-muted mb-4">-->
<!--                    至少4个字符-->
<!--                </small>-->

                <!-- Password -->
                <input type="password" name="password" id="defaultRegisterFormPassword" class="form-control"
                       placeholder="密码（至少4个字符）"
                       aria-describedby="defaultRegisterFormPasswordHelpBlock">
<!--                <small class="form-text text-muted mb-4">-->
<!--                    至少4个字符并包含至少一个数字-->
<!--                </small>-->

                <input type="password" name="password" id="defaultRegisterFormPassword1" class="form-control"
                       placeholder="重复密码"
                       aria-describedby="defaultRegisterFormPasswordHelpBlock">
<!--                <small id="defaultRegisterFormPasswordHelpBlock1" class="form-text text-muted mb-4">-->
<!--                    再次输入密码进行确认-->
<!--                </small>-->

                <!-- Sign up button -->
                <button class="btn1 btn-info my-4 btn-block" type="button" id="registBtn">注册</button>

                <!-- Register -->
                <p style="margin-top: 20px">已有账号?
                    <a href="javascript:loginNow()">立即登录</a>
                </p>
            </div>
        </div>
    </div>
</div>

        <script>

            // 获取表单元素
            let title = document.getElementsByTagName('title')[0];
            const loginForm = document.getElementById("loginForm");
            const registerForm = document.getElementById("registerForm");

            // 默认flag
            let loginFlag = true;
            let registerFlag = false;

            // 默认标题
            title.text = "登录";
            // 默认隐藏注册表单
            registerForm.style.display = "none";

            // 显示登录表单，隐藏注册表单
            function loginNow() {
                loginFlag = true;
                registerFlag = false;
                title.text = "登录";
                loginForm.style.display = "";
                registerForm.style.display = "none";
            }

            // 显示注册表单，隐藏登录表单
            function registerNow() {
                loginFlag = false;
                registerFlag = true;
                title.text = "注册";
                registerForm.style.display = "";
                loginForm.style.display = "none";
            }

            // 绑定按钮事件
            $(function () {
                $("#submitBtn").click(function () {
                    login();
                })
                $("#registBtn").click(function () {
                    regist();
                })
            })

            // 定义功能
            function login() {
                var username = $("#defaultLoginFormName").val();
                var password = $("#defaultLoginFormPassword").val();

                password = hex_md5(password);
                console.log(password);

                $.ajax({
                    url: "/login",
                    type: "post",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    async: false,
                    data: JSON.stringify(
                        {
                            "username": username,
                            "password": password
                        }
                    ),
                    success: function (data) {
                        if (data.er == "0") {
                            alert("成功");
                            sleep(1000);
                            window.location.href = data.url
                        } else if (data.er == "1") {
                            alert("用户名不存在");
                            sleep(1000);
                            window.location.href = data.url
                        } else {
                            alert("密码错误");
                            sleep(1000);
                            window.location.href = data.url
                        }
                    },
                })
            }

            // 睡眠几秒
            function sleep(numberMillis) {
                var now = new Date();
                var exitTime = now.getTime() + numberMillis;
                while (true) {
                    now = new Date();
                    if (now.getTime() > exitTime)
                        return;
                }
            }

            // 注册
            function regist() {
                let username = $("#defaultRegisterFormFirstName").val();
                let password = $("#defaultRegisterFormPassword").val();
                let repassword = $("#defaultRegisterFormPassword1").val();

                let usernameReg = /^[a-zA-Z]{4,15}$/;
                let passwordReg = /^[a-zA-Z0-9]{4,15}$/;

                // 判断用户名和密码格式
                if (password == repassword && usernameReg.test(username) && passwordReg.test(password)) {
                    password = hex_md5(password);
                    // console.log(username, password);
                    $.ajax({
                        url: "/regist",
                        type: "post",
                        contentType: "application/json;charset=utf-8",
                        dataType: "json",
                        async: false,
                        data: JSON.stringify(
                            {
                                "username": username,
                                "password": password
                            }
                        ),
                        success: function (data) {
                            if (data.er == "0") {
                                alert("成功注册!");
                                sleep(2000);
                                window.location.href = "/login.html"
                            } else if (data.er == "1") {
                                alert("用户名重复,请重新输入");

                            }
                        },
                        error: function (data) {
                            alert("密码错误");
                            sleep(2000);
                            window.location.href = data.url
                        }
                    })
                } else {
                    alert("用户名或密码格式错误!")
                }
            }

            // 点击回车按钮登录
            document.body.addEventListener('keyup', function (e) {
                console.log(e)
                if (e.keyCode == '13') {
                    // 登录
                    if (loginFlag) {
                        login()

                        // 注册
                    } else if (registerFlag)
                        regist()
                }
            });

        </script>

</body>
</html>



